/**
 * 2018/04/20 by xiongisxiong
 */
import React, { Component } from 'react'
import { View, Text, Image  } from 'react-native'
import { StackNavigator, TabNavigator, DrawerNavigator, TabBarBottom, ScrollView } from 'react-navigation'

// 首页的页面
import HomePage from './testComponents_Com/HomePage'
import FindPage from './testComponents_Com/FindPage'
import MinePage from './testComponents_Com/MinePage'

// import Drawer from './Drawer'

/** 配置底部标签 */
const Tab = TabNavigator({
  Home: {
    screen: HomePage,
    path: '/home',
    navigationOptions: ({navigation}) => ({
      // title: '首页'
      // stackNavigation的属性
      headerTitle: '首页呀', // 头标题
      getuserResponseDistance: {horizontal: 300},
      headBackTitle: null, // 返回标题，经测试貌似没什么用 
      headerStyle: {backgroundColor: '#EB3695'}, // 导航栏的样式 ：高，背景色
      headerTitleStyle: { // 导航栏文字的样式
        color: 'white',
        fontSize: 16, // 设置标题的大小
        alignSelf: 'center' // 居中显示
      },
      // tab的属性
      tabBarLabel: '首页',
      tabBarIcon: ({tinitColor}) => (
        // <Image 
        //   source={require('./imgs/2.jpg')}
        //   style={[{width:24, height:24},{tinitColor: tinitColor}]}
        // />
        <Image 
          source={require('./imgs/2.jpg')}
          style={[{width:24, height:24}]}
        />
      )
    })
  },
  Find: {
    screen: FindPage,
    path: '/find',
    navigationOptions: ({navigation}) => ({
      // title: '发现'
      // stackNavigation的属性
      headerTitle: '发现呀', // 头标题
      getuserResponseDistance: {horizontal: 300}, // 对象覆盖触摸从屏幕边缘开始的距离，以识别手势   设置滑动返回的距离
      headBackTitle: null, // 返回标题，经测试貌似没什么用 
      headerStyle: {backgroundColor: '#EB3695'}, // 导航栏的样式 ：高，背景色
      headerTitleStyle: { // 导航栏文字的样式
        color: 'white',
        fontSize: 16, // 设置标题的大小
        alignSelf: 'center' // 居中显示
      },
      // tab的属性
      tabBarLabel: '发现',
      tabBarIcon: ({tinitColor}) => (
        <Image 
          source={require('./imgs/3.jpg')}
          style={[{width:24, height:24}]}
        />
      )
    })
  },
  Mine: {
    screen: MinePage,
    path: '/mine',
    navigationOptions: ({navigation}) => ({
      // title: '我的'
      // stackNavigation的属性
      headerTitle: '我的呀', // 头标题
      getuserResponseDistance: {horizontal: 300}, // 对象覆盖触摸从屏幕边缘开始的距离，以识别手势   设置滑动返回的距离
      headBackTitle: null, // 返回标题，经测试貌似没什么用 
      headerStyle: {backgroundColor: '#EB3695'}, // 导航栏的样式 ：高，背景色
      headerTitleStyle: { // 导航栏文字的样式
        color: 'white',
        fontSize: 16, // 设置标题的大小
        alignSelf: 'center' // 居中显示
      },
      // tab的属性
      tabBarLabel: '我的',
      tabBarIcon: ({tinitColor}) => (
        <Image 
          source={require('./imgs/5.jpg')}
          style={[{width:24, height:24}]}
        />
      )
    })
  }
},{
  initialRouteName: 'Home', // 默认路由的名字
  initialRouteParams: {initPara: '初始页面参数'},
  tabBarComponent: TabBarBottom, // Tab选项卡组件 在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop
  tabBarPosition: 'bottom', // Tab选项卡的位置
  swipeEnabled: true, // 是否可以左右滑动切换tab
  animationEnabled: true, // 点击Tab选项卡切换界面是否需要动画
  lazy: true, // 懒加载
  tabBarOptions: {
    activeTintColor: '#EB3695', // 选中的文字颜色
    inactiveTintColor: 'gray', // 未选中的文字颜色
    style: { // 整个TabBar的样式
      backgroundColor: '#333'
    },
    inicatorStyle: { // 标签指示器的样式对象（选项卡底部的行），安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
      height: 0,
    },
    labelStle: { // 文字的样式： 字体大小，margin值
    },
    iconStyle: { // 图标的样式
    }
  }
})



/** 配置堆栈导航 */
const Navigator = StackNavigator({
  Tab: {
    screen: Tab,
    path: '/tab'
  },
  // DrawerNavigator 跳转的页面必须在这里注册
},{
  // 这里的配置会覆盖掉tab里面给stack设置的配置
  // initialRouteName: 'Tab',
  // navigationOptions: {
  //   title: '标题',
  //   headerStyle: {backgroundColor: '#5da8ff'},
  //   headerTitleStyle: {color: '#333'}
  // }
})


/** 配置侧滑菜单   抽屉导航*/
const CustomDrawerContentComponent = (props) => (
  <ScrollView>
      {/*<DrawerItems {...props} />*/}
      <View>
          <Text>46645646546</Text>
      </View>
  </ScrollView>
);
const Drawer = DrawerNavigator({
  HomeD: {
    screen: Navigator,
    navigationOptions: ({navigation}) => ({
      drawerLabel: '首页drawerLabel',
      drawerIcon: ({focused, tintColor}) => (
        <Image 
          source={require('./imgs/2.jpg')}
          style={{width:24, height: 24}}
        />
      )
    })
  },
  NearBy: {
    screen: FindPage,
    navigationOptions:({navigation}) => ({
      drawerLabel: '附近drawerLabel',
      // drawerIcon: ({focused, tintColor}) => (
      //   <TabBarItem 
      //   tintColor={tintColor}
      //   focused={focused}
      //   normalImage={require('./imgs/7.jpg')}
      //   selectedImage={require('./imgs/8.jpg')}
      //   />
      // )
      drawerIcon: ({focused, tintColor}) => (
        <Image 
          source={require('./imgs/7.jpg')}
          style={{width:24, height: 24}}
        />
      )
    })

  }
},{
  // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
  drawerWidth: 220, //抽屉宽
  drawerPosition: 'left', // 抽屉显示在左边还是右边
  // contentOptions: {
  //   initialRouteName: 'NearBy', // 默认页面组件
  //   activeTintColor: 'red', // 选中文字颜色
  //   inactiveTintColor: 'yellow', // 未选中文字颜色
  //   inactiveBackgroundColor: 'green', // 未选中背景颜色==
  //   style: {// 样式
  //   }
  // }
})


class RootScene extends Component {
  render() {
    return (
        <Drawer />
    )
  }
}

export default RootScene






// 假设App就是项目中的入口文件，如果还不知道，可以看下Demo，在这里我将主题色通过screenProps属性修改成'red'
// <App screenProps={{themeColor:'red'}}>
// 在页面中就可以通过screenProps来直接改变了，这个在Demo中的Test2里面

// static navigationOptions = ({navigation, screenProps}) => ({
//         // 这里面的属性和App.js的navigationOptions是一样的。
//                 headerStyle: {backgroundColor: screenProps?
//                 screenProps.themeColor:
//                 '#4ECBFC'},
//     )
// })
